<template>
  <div class="home">
    <div class="bg-home">
      <div>
        <img
          src="@/assets/img/02.png"
          alt=""
        />
      </div>
      <!-- 注册 -->
      <div class="registerBox">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
        >
          <!-- <el-form-item
            label="用户名"
            prop="YHM"
          >
            <el-input v-model="ruleForm.YHM"></el-input>
          </el-form-item> -->
          <el-form-item
            label="姓名"
            prop="XM"
          >
            <el-input v-model="ruleForm.XM"></el-input>
          </el-form-item>
          <el-form-item
            label="性别"
            prop="XB"
          >
            <el-radio-group v-model="ruleForm.XB">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="身份证号"
            prop="SFZH"
          >
            <el-input v-model="ruleForm.SFZH"></el-input>
          </el-form-item>
          <el-form-item
            label="年龄"
            prop="RYNL"
          >
            <el-input v-model="ruleForm.RYNL"></el-input>
          </el-form-item>

          <el-form-item
            label="邮箱"
            prop="YX"
          >
            <el-input v-model="ruleForm.YX"></el-input>
          </el-form-item>
          <!-- <el-form-item label="学历" prop="education">
                        <el-input v-model="ruleForm.education"></el-input>
                    </el-form-item>
                    <el-form-item label="专业" prop="major">
                        <el-input v-model="ruleForm.major"></el-input>
                    </el-form-item> -->
          <!-- <el-form-item
            label="专业"
            prop="ZY"
          >
            <el-input v-model="ruleForm.ZY"></el-input>
          </el-form-item> -->
          <el-form-item
            label="工作单位"
            prop="YLJG"
          >
            <el-select
              v-model="ruleForm.YLJG"
              placeholder="请选择机构"
            >
              <el-option
                v-for="(companyItem,index) in companyList"
                :label="companyItem.ORGMC"
                :value="companyItem.ORGMC"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="人员分类"
            prop="RYFL"
          >
            <el-select
              v-model="ruleForm.RYFL"
              placeholder="请选择类型"
            >
              <el-option
                v-for="(userSortItem,index) in userSortList"
                :label="userSortItem.zdmc"
                :value="userSortItem.zdmc"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="固定电话"
            prop="GDDH"
          >
            <el-input v-model="ruleForm.GDDH"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="SJH"
          >
            <el-input v-model="ruleForm.SJH"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="验证码"
            prop="YZM"
          >
            <el-input v-model="ruleForm.YZM"></el-input>
            <span
              style="position: absolute;top: 8%;left: 33%;cursor:pointer;"
              @click="getCodeClick()"
            >{{ code }}</span>
          </el-form-item> -->
          <el-form-item
            label="密码"
            prop="password"
          >
            <el-input
              v-model="ruleForm.password"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="respassword"
          >
            <el-input
              v-model="ruleForm.respassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item
            label=""
            prop="type"
          >
            <el-checkbox
              v-model="ruleForm.checked"
              label="阅读并接受隐私声明"
            ></el-checkbox>
            <span
              style="margin-left:10px;cursor:pointer;"
              @click="privacyClick"
            > 隐私声明</span>
          </el-form-item>
        </el-form>
        <div style="display:flex;align-items:center;">
          <div
            class="toLog"
            @click="toLog()"
          >已经注册过？直接登录</div>
          <div>
            <el-button
              type="primary"
              @click="goRegClick()"
            >注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="隐私声明"
      :visible.sync="dialogVisible"
      width="80%"
      height="100%"
      :before-close="handleClose"
    >
      <iframe
        src="http://www.ieta.com.cn:86/cpisAPI/Home/YSZC"
        frameborder="0"
        width="100%"
        height="600px"
      ></iframe>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import  axios from 'axios'
import { getRegisterAPI, getCodeAPI, getSelectListAPI } from '@/api/user';
import { getOrganizationAPI } from '@/api/backStage.js';
export default {
    data() {
        return {
            ip: '',
            codeText: '获取验证码',
            code: '',
            dialogVisible: false,
            show: true,
            companyList: [],
            userSortList: [],
            ruleForm: {
                // YHM: '', // 用户名
                XM: '', // 姓名
                XB: ' ', // 性别
                SFZH: '', // 身份证号
                RYNL: '', // 年龄
                ZY: '', // 专业
                YX: '', // 邮箱
                YLJG: '', // 单位,
                GDDH: '', // 固定电话
                SJH: '', // 手机
                password: '', //密码
                respassword: '', // 重复密码
                RYFL: '', // 人员分类
                YZM: '', // 验证码
                checked: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                cardID: [{ required: true, message: '请输入身份证号', trigger: 'blur' }, { min: 18 }],
                age: [
                    { required: false, message: '请输入年龄', trigger: 'blur' }
                    // { type: , message: '年龄必须为数字值'}
                ],
                sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                // education: [{ required: false, message: '请输入学历', trigger: 'blur' }],
                // major: [{ required: false, message: '请输入专业', trigger: 'blur' }],
                position: [{ required: false, message: '请输入职位名称', trigger: 'blur' }],
                company: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
                fixedTel: [{ required: false, message: '请输入固定电话', trigger: 'blur' }],
                telPhone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                    // { type: 'number'}
                ],
                // code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码要多于6位', trigger: 'blur' }
                ],
                respassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
                checked: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
            }
        };
    },
    mounted() {
        this.ready();
        // this.getCodeClick();
        // window.addEventListener('scroll', this.scrollToTop); //监听滚动条
        this.getCompanyListData();
        this.getUserSortListData();
    },
    // destroyed() {
    //     window.removeEventListener('scroll', this.scrollToTop); //移除滚动条监听
    // },
    methods: {
        privacyClick() {
            this.dialogVisible = true;
        },
        handleClose(done) {
            done();
        },
        // 获取ip
        ready() {
            let cip = returnCitySN['cip'];
            let cid = returnCitySN['cid'];
            let cname = returnCitySN['cname'];
            this.ip = cip;
        },
        toLog() {
            this.$emit('goLogin');
        },
        // 获取机构列表信息
        async getCompanyListData() {
            let res = await getOrganizationAPI({
                token: 'null',
                OrgBM: 'null',
                OrgMC: 'null',
                OrgFJ: 'null',
                OrgLX: 'null'
            });
            if (res.code == 'succ') {
                this.companyList = res.result;
            }
        },
        async getUserSortListData() {
            const res = await getSelectListAPI({
                key: 'ZCRYFL'
            });
            if (res.code == 'succ') {
                this.userSortList = res.result;
            } else {
                this.$message.error(res.message);
            }
        },
        // 点击获取验证码
        async getCodeClick() {
            const res = await getCodeAPI({
                ip: this.ip,
                SJH: 'null'
            });
            if (res.code == 'succ') {
                // let i = 60;
                // let timer = setInterval(() => {
                //     this.codeText = '倒计时' + i + 's';
                //     i--;
                //     if (i < 0) {
                //         this.codeText = '获取验证码';
                //         clearInterval(timer);
                //     }
                // }, 1000);
                this.code = res.result;
            } else {
                this.$message.error(res.message);
            }
        },
        // 点击隐私声明
        // privacyClick() {
        //     window.open('http://www.ieta.com.cn:86/cpisAPI/Home/YSZC');
        // },
        // 注册
        async goRegClick() {
            const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
            // 验证码验证
            // if (this.ruleForm.YZM != this.code) {
            //     this.$message({
            //         showClose: true,
            //         message: '提示：请输入正确的验证码',
            //         type: 'error'
            //     });
            // }
            // 手机号注册验证
            if (!reg.test(this.ruleForm.SJH)) {
                this.$message({
                    showClose: true,
                    message: '提示：请输入正确的手机号',
                    type: 'error'
                });
            }
            // // 密码验证
            else if (this.ruleForm.password != this.ruleForm.respassword) {
                this.$message({
                    showClose: true,
                    message: '提示：两次密码不一致',
                    type: 'error'
                });
            }
            // 隐私声明
            else if (this.ruleForm.checked == false) {
                this.$message({
                    showClose: true,
                    message: '提示:请阅读并勾选用户名隐私声明',
                    type: 'error'
                });
            } else {
                const userObj = {
                    YHM: 'null',
                    XM: this.ruleForm.XM,
                    XB: this.ruleForm.XB,
                    SFZH: this.ruleForm.SFZH,
                    RYNL: this.ruleForm.RYNL,
                    ZY: 'null',
                    YX: this.ruleForm.YX,
                    YLJG: this.ruleForm.YLJG,
                    GDDH: this.ruleForm.GDDH,
                    SJH: this.ruleForm.SJH,
                    PASSWORD: this.ruleForm.password,
                    RESPASSWORD: this.ruleForm.respassword,
                    RYFL: this.ruleForm.RYFL,
                    IP: this.ip,
                    YZM: 'null'
                };
                // let aaa = JSON.stringify(userObj)
                let res = await getRegisterAPI({
                    Params: userObj,
                    yhm: this.ruleForm.username
                });
                if (res.code == 'succ') {
                    this.$message.success('注册成功');
                    this.ruleForm = {};
                } else {
                    this.$message.error(res.message);
                }
            }
        }
    },
    components: {}
};
</script>
<style scoped>
.home {
    width: 100%;
    min-height: 100vh;
    /* display: flex; */
}
.bg-home {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    width: 95%;
    margin: 20px auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.registerBox {
    width: 60%;
    margin: 20px auto;
    padding: 20px;
}
.username,
.password {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
::v-deep .el-select {
    width: 100% !important;
}
::v-deep .el-select-dropdown .el-popper {
    min-width: 260px !important;
}
::v-deep .el-input {
    width: 50% !important;
}
::v-deep .el-radio__label {
    font-size: 1.3rem;
}
::v-deep .el-checkbox__inner::after {
    height: 10px;
    left: 8px;
    position: absolute;
    top: 2px;
}

.toLog {
    font-size: 1.1rem;
    margin-right: 30px;
    cursor: pointer;
}
</style>
